<!--
登录，注册表单
-->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import LoginForm from './LoginForm.vue'
import RegisterForm from './RegisterForm.vue'


const state = reactive({
  loading: false
})

const tabsOption = {
  login: { label: '登录', value: 'login' },
  register: { label: '注册', value: 'register' }
}
const activeTab = ref<string>(tabsOption.login.value)

const loginRef = ref<InstanceType<typeof LoginForm> | null>(null)

const registerRef = ref<InstanceType<typeof RegisterForm> | null>(null)

async function handleConfirm () {
  state.loading = true
  await loginRef?.value?.confirm()
  state.loading = false
}

</script>

<template>
  <div class="login-view">
    <div class="title">管理后台</div>
    <el-tabs v-model="activeTab" stretch class="demo-tabs">
      <el-tab-pane label="登录" :name="tabsOption.login.value">
        <LoginForm ref="loginRef" />
      </el-tab-pane>
      <el-tab-pane label="注册" :name="tabsOption.register.value">
        <RegisterForm ref="registerRef" />
      </el-tab-pane>
    </el-tabs>
    <el-button class="login-btn" :loading="state.loading" type="primary" @click="handleConfirm">
      {{ tabsOption[activeTab].label }}
    </el-button>
  </div>
</template>

<style lang="less" scoped>
.login-view {
  .title {
    margin: 0 auto 20px;
    line-height: 37px;
    font-size: 26px;
    font-weight: 500;
    color: #000;
    text-align: center;
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .login-btn {
    width: 100%;
    height: 40px;
  }
}
</style>
